<template>
	<u-popup v-model="show" mode="center" border-radius="15">
		<view class="code-popup">
			<view class="header">
				<view></view>
				<view class="title">{{title}}</view>
				<u-icon name="close" @click="show = false"></u-icon>
			</view>
			<view class="code">
				<image :src="src || userInfo.qr_code" mode="aspectFit"></image>
			</view>
			<view class="bottom">
				<slot name="bottom">
					<view class="refresh" @click="refreshInfo">
						<u-icon name="clock"></u-icon>
						<text>更新二维码(每60秒自动更新)</text>
					</view>
				</slot>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import dialogSyncClose from "@/mixin/dialog-sync-close.js"
	import {mapGetters, mapActions} from "vuex"
	export default {
		name: "code-popup",
		mixins: [dialogSyncClose()],
		props: {
			title: {
				type: String,
				default: "我的会员码"
			},
			src: {
				type: String,
				default: ""
			}
		},
		computed: {
			...mapGetters(["userInfo", "shareId"]),
		},
		data() {
			return {

			};
		},
		methods: {
			...mapActions([
				"setUserInfo",
			]),
			async refreshInfo() {
				await this.setUserInfo()
				this.$utils.success('更新成功')
			},
		}
	}
</script>

<style scoped lang="scss">
	.code-popup {
		width: 576rpx;

		.header {
			background-color: $primary-color;
			color: #FFF;
			@extend .flex-btw;
			padding: 33rpx 28rpx;

			.title {
				font-size: 26rpx;
			}
		}

		.code {
			width: 354rpx;
			height: 354rpx;
			margin: 70rpx auto;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.refresh {
		@extend .flex-center;
		margin-bottom: 62rpx;
		color: $primary-color;
		font-size: 24rpx;
	}
</style>
